.iot-yg-component{
    .radio{
        .switch {
            display: block;
            position: relative;
            background-color: black;
            width: 30px;
            height: 30px;
            box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 5px #47434c, inset 0 0 2px 22px black;
            border-radius: 50%;
            padding: 20px;
            margin: 5px;
          }
          
          .switch input {
            display: none;
          }
          
        //   .switch input:checked + .button .light {
        //     animation: flicker 0.2s infinite 0.3s;
        //   }
          
          .switch input:checked + .button .shine {
            opacity: 1;
          }
          
          .switch input:checked + .button .shadow {
            opacity: 0;
          }
          
          .switch .button {
            transition: all 0.3s cubic-bezier(1, 0, 1, 1);
            background-color: #4d0916;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            position: relative;
            left: -0.9em;
            top: -0.90em;
            cursor: pointer;
            .light{
                animation: flicker 0.2s infinite 0.3s;
            }
          }
          
          .switch .light {
            opacity: 0;
            animation: light-off 1s;
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
          }
          
          .switch .dots {
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: radial-gradient(transparent 30%, rgba(36, 5, 5, 0.7) 70%);
            background-size:0;
            border-radius: 50%;
          }
          
          @keyframes flicker {
            0% {
              opacity: 1;
            }
          
            80% {
              opacity: 0.8;
            }
          
            100% {
              opacity: 1;
            }
          }
          
          @keyframes light-off {
            0% {
              opacity: 1;
            }
          
            80% {
              opacity: 0;
            }
          }
          
          .switch1 {
            display: block;
            position: relative;
            background-color: black;
            width: 70px;
            height: 70px;
            box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 5px #47434c, inset 0 0 2px 22px black;
            border-radius: 50%;
            padding: 20px;
            margin: 5px;
          }
          
          .switch1 input {
            display: none;
          }
          
        //   .switch1 input:checked + .button .light {
        //     animation: flicker 0.2s infinite 0.3s;
        //   }
          
          .switch1 input:checked + .button .shine {
            opacity: 1;
          }
          
          .switch1 input:checked + .button .shadow {
            opacity: 0;
          }
          
          .switch1 .button {
            transition: all 0.3s cubic-bezier(1, 0, 1, 1);
            background-color: #949207;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            position: relative;
            left: -0.9em;
            top: -0.90em;
            cursor: pointer;
          }
          
          .switch1 .light {
            opacity: 0;
            animation: light-off 1s;
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: radial-gradient(#f6ff7e, #eeff00 40%, transparent 70%);
          }
          
          .switch1 .dots {
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: radial-gradient(transparent 30%, rgba(91, 101, 0, 0.7) 70%);
            background-size: 10px 10px;
            border-radius: 50%;
          }
          
          .switch2 {
            display: block;
            position: relative;
            background-color: black;
            width: 30px;
            height: 30px;
            box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 5px #47434c, inset 0 0 2px 22px black;
            border-radius: 50%;
            padding: 20px;
            margin: 5px;
          }
          
          .switch2 input {
            display: none;
          }
          
        //   .switch2 input:checked + .button .light {
        //     animation: flicker 0.2s infinite 0.3s;
        //   }
          
        //   .switch2 input:checked + .button .shine {
        //     opacity: 1;
        //   }
          
          .switch2 input:checked + .button .shadow {
            opacity: 0;
          }
          
          .switch2 .button {
            transition: all 0.3s cubic-bezier(1, 0, 1, 1);
            background-color: #142b0b;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            position: relative;
            left: -0.9em;
            top: -0.90em;
            cursor: pointer;

            .light{
                animation: flicker 0.2s infinite 0.3s;
            }
          }
          
          .switch2 .light {
            opacity: 0;
            animation: light-off 1s;
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: radial-gradient(#f6ff7e, #00ff00 40%, transparent 70%);
          }
          
          .switch2 .dots {
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: radial-gradient(transparent 30%, rgba(0, 101, 13, 0.7) 70%);
            background-size: 0;
            border-radius: 50%;
          }
    }
}